<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 商品展示 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in Pbanner" :key="item.id">
        <img :src="item.img_url" style="width: 100%; height: 5rem" />
      </van-swipe-item>
    </van-swipe>
    <!-- 30天无理由退款 -->
    <div class="tips">
      <van-row>
        <van-col span="8"
          ><van-icon name="passed" color="red" />30天无理由退款</van-col
        >
        <van-col span="8"
          ><van-icon name="passed" color="red" />正品保证</van-col
        >
        <van-col span="8"
          ><van-icon name="passed" color="red" />满88元包邮费</van-col
        >
      </van-row>
    </div>
    <!-- 商品价格、商品介绍 -->
    <div class="Pdetil">
      <p>{{ PdetilList.name }}</p>
      <h3>{{ PdetilList.goods_brief }}</h3>
      <div class="secondPrice">
        <h4>限时秒杀</h4>
        <h2><span>￥</span>{{ PdetilList.retail_price }}</h2>
        <div class="secondDown">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <van-cell title="展示弹出层" is-link @click="isSkuShow = true" />
    <!-- 商品参数展示 -->
    <div class="Pattribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item, index) in pattribute" :key="index">
          <div class="l">{{ item.name }}</div>
          <div class="r van-ellipsis">{{ item.value }}</div>
        </li>
      </ul>
    </div>
    <div>
      <!-- 商品图片展示 -->
      <div class="goods_desc" v-html="goods_desc"></div>
    </div>
    <!-- sku -->
    <van-sku
      v-model="isSkuShow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      ref="Sku"
      @stepper-change="onchange"
    />
    <!-- 尾部 -->
    <AppGoodsActive @gotoCart="gotoCart" :goodsNum="goodsNum"></AppGoodsActive>
  </div>
</template>

<script>
import { productDetail } from "@/api/cart.js";
import AppGoodsActive from "@/components/AppGoodsActive";
export default {
  data() {
    return {
      //sku是否显示
      isSkuShow: false,
      //sku数据
      sku: {
        tree: [],
        hide_stock: false, //库存是否隐藏
        price: "", //价格
        stock_num: "", //库存
      },
      //商品数据，
      goods: {
        picture: "", //图片
      },
      //轮播图片
      Pbanner: [],
      // 商品信息
      PdetilList: [],
      //商品参数
      pattribute: [],
      //商品图片
      goods_desc: "",
      //购物商品数量
      goodsNum: 0,
      //productList数据
      productList: [],
      //存储在Vuex中的商品对象
      Product: {},
      // 获取步进里里面的数量
      value: "",
      // 倒计时
      time: 24 * 60 * 60 * 60,
      timeData: {
        hours: 1,
        minutes: 60,
        seconds: 60,
      },
    };
  },
  async created() {
    let res = await productDetail(this.$route.query.id);
    let data = res.data.data;
    let { gallery, info, attribute, productList } = data;
    this.productList = productList;
    this.Pbanner = gallery;
    this.PdetilList = info;
    this.goods_desc = info.goods_desc;
    this.pattribute = attribute;
    this.goods.picture = info.list_pic_url;
    //步进器里的库存数量
    this.sku.stock_num = info.goods_number;
    this.sku.price = info.retail_price;
    this.goodsNum = this.$store.getters.cartList.length;
    // console.log(this.goodsNum);
  },
  components: {
    AppGoodsActive,
  },
  methods: {
    // 获取步进器的数量
    onchange(value) {
      this.value = value;
    },
    // 定时器方法
    start() {
      this.$refs.countDown.start();
    },
    pause() {
      this.$refs.countDown.pause();
    },
    reset() {
      this.$refs.countDown.reset();
    },
    finish() {
      Toast("倒计时结束");
    },

    //点击购物车按钮，如果sku未展示，则展示
    //展示来了就组购物车
    gotoCart() {
      if (this.isSkuShow) {
        console.log("aaa");
        //获取要添加的数量
        //加入购物车
        productDetail(this.$route.query.id).then((res) => {
          if (res.data.errno == 0) {
            //更新数量
            this.goodsNum = this.$store.getters.cartList.length;
            //跳转购物车
            this.$toast.success("加入购物车成功");
            let data = res.data.data;
            let { info } = data;
            // 获取商品数据
            // 组成商品对象
            //组成商品对象存储在Vuex
            this.Product = {
              id: info.id,
              num: this.value,
              price: info.retail_price,
              name: info.name,
              state: false,
              pic: info.list_pic_url,
            };
            let newproduct = this.Product;
            let oldProduct = this.$store.getters.cartList.find(
              (item) => item.id == newproduct.id
            );
            let user = this.$store.getters.user;
            if (user) {
              if (oldProduct) {
                oldProduct.num =
                  Number(oldProduct.num) + Number(this.Product.num);
                this.$router.push("/cart");
              } else {
                this.$store.dispatch("addCart", this.Product);
                this.$router.push("/cart");
              }
            } else {
              this.$toast.fail("请登录");
              return;
            }
          }
        });
      } else {
        this.isSkuShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/**提示tips样式*/
.tips {
  font-size: 0.12rem;
  background-color: #ea8360bd;
  text-align: center;
  line-height: 0.3rem;
}
/* 商品介绍样式 */
.Pdetil {
  text-align: center;
  border-bottom: 0.01rem dotted black;
  h3 {
    font-size: 0.3rem;
    margin-bottom: 0.1rem;
  }
  p {
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
  }
  // 倒计时限时秒杀
  .secondPrice {
    display: flex;
    justify-content: center;
    margin-bottom: 0.1rem;
    h4 {
      font-size: 0.12rem;
      color: red;
    }
    .secondDown {
    }
    h2 {
      margin: 0 0.2rem;
      font-size: 0.12rem;
      color: red;
    }
  }
}
/**商品参数样式 */
.Pattribute {
  li {
    display: flex;
    height: 0.4rem;
    line-height: 0.4rem;
    background-color: #ccc;
    margin: 0.1rem;
    .l {
      width: 30%;
      text-align: right;
      margin-right: 0.1rem;
      font-size: 0.14rem;
    }
    .r {
      flex: 1;
      font-size: 0.12rem;
    }
  }
}
/* 商品图片样式 */
::v-deep.goods_desc {
  p {
    margin: 0 !important;
    img {
      display: block;
      width: 100%;
    }
  }
}
// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>